<template>
    <div class="status" @click="set">
        <span>{{name}}</span>
        <span class="dot" :class="status == 1 ? 'dotSuccess':status == 2 ? 'dotError' : 'dotWarning'"></span>
    </div>
</template>
<script>
    export default {
        props: ['name', 'status'],
        data() {
            return {

            }
        },
        methods: {
            set() {
                this.status == 1 && this.$emit('set')
            }
        }
    }
</script>
<style lang="less" scoped>
    .status {
        cursor: pointer;
        width: 66px;
        height: 30px;
        border: 1px solid #eee;
        border-radius: 5px;
        margin: 0 auto;
        line-height: 30px;
        font-size: 14px;
        padding-left: 20px;
        position: relative;

        .dot {
            position: absolute;
            width: 10px;
            height: 10px;
            border-radius: 50%;
            left: 10px;
            top: 10px
        }

        .dotSuccess {
            background-color: #2BDE73;
        }

        .dotError {
            background-color: #F2555B;
        }

        .dotWarning {
            background-color: rgb(245, 190, 11);
        }
    }
</style>